<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style type="text/css">
			ul{
				display:flex;
			}
			li{
				list-style:none;
				width: 50px;
				height: 50px;
				border-radius:50%;
				background-color:blue;
				color:#fff;
				text-align: center;
				line-height:50px;
				margin:10px;
			}
			.list-move{
				transition: all .5s;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button @click="order(1)">升序</button>
			<button @click="order(2)">降序</button>
			<button @click="order(0)">乱序</button>
			<ul>
				<li v-for="i in list">
					{{i}}
				</li>
			</ul>
			<transition-group name='list' tag='ul'>
				<li v-for="i in list" :key='i'>{{i}}</li>
			</transition-group>
		</div>
		<script>
			Vue.createApp({
				data(){
					return{
						list:[1,2,3,4,5,6,7,8]
					}
				},
				methods:{
					order(type){  //排序
					if(type==1){
						//升序
						this.list.sort((a,b)=>a-b)
					}else if(type==2){
						//降序
						this.list.sort((a,b)=>b-a)
					}else {
						//乱序
						
						this.list.sort(()=>Math.random()-0.5)
					}
					}
				}
				
			}).mount('#app')
		</script>
	</body>
</html>